import React from 'react'
import './User.css'

class User extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
			userList: []
  	    };
    }
	componentDidMount() {
		let url1 = "http://154.8.202.56:8081/user/getall";
        fetch(url1, {
            method: 'POST',
            body: JSON.stringify({
                
            }),
            headers: {
                "Access-Control-Allow-Origin":"*",
                'content-type': 'application/json'
            },
            mode: 'cors'
        })
        .then(res => res.json())
        
        .then(res => this.setState({
            userList: res
        }))
	}
    render () {
		const delUser = (userid) => {
			let url = "http://154.8.202.56:8081/user/deluser";
        	fetch(url, {
				method: 'POST',
				body: JSON.stringify({
					userid: userid
				}),
				headers: {
					"Access-Control-Allow-Origin":"*",
					'content-type': 'application/json'
				},
				mode: 'cors'
			})
		}
		return (
				<table border="1" cellSpacing="0">
					<thead>
						<tr>
							<th>用户ID</th>
							<th>昵称</th>
							<th>头像</th>
							<th>个性标签</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						{
							this.state.userList.map((item, idx) => {
								return (
								<tr key={idx}>
									<td>{item.userid}</td>
									<td>{item.name}</td>
									<td><img src={item.pic} alt=""/></td>
									<td>{item.signature}</td>
									<td>
										<button onClick={() => {
											
											let arr = this.state.userList;
											for(let i = 0; i < arr.length; i ++){
												if(arr[i].userid == item.userid){
													arr.splice(i, 1);
													break;
												}
											}
											this.setState({
												userList: arr
											})
											delUser(item.userid);
										}}>删除</button>
									</td>
								</tr>
								)	
							})
						}
					</tbody>
				</table>
    );
  }
}
export default User
